import React, { useState, useMemo } from 'react';
import { Space, Divider, Popover } from 'antd'


import moment from 'moment'

import styles from '../index.module.less'

const MedicalRecordItem: React.FC = ({
  data
}) => {


  console.log('MedicalRecordItem ________________:>> ', data);

  const [open, setOpen] = useState(false);

  const hide = () => {
    setOpen(false);
  };

  const handleOpenChange = (newOpen: boolean) => {
    setOpen(newOpen);
  };

  const title = data?.gmtCreate && moment(data?.gmtCreate).format('YYYY-MM-DD');

  const tyDiagnosisInfo = useMemo(() => {
    try{
      return data?.tyDiagnosisTermJson && JSON.parse(data?.tyDiagnosisTermJson);
    }catch(e){}
    return {};
  }, [data])

  return (
    <>
      <Popover
        content={
          <div className={styles.popoverWrap}>
            <div>
              <h3>病名</h3>
              <Space>
                {data?.tyIllnessName}
              </Space>
            </div>
            <Divider />
            <div>
              <h3>副病名</h3>
              <Space>
                {data?.assistantIllnessName}
              </Space>
            </div>
            <Divider />
            <div>
              <h3>病因病机</h3>
              <Space>
                {
                  tyDiagnosisInfo?.messageJson?.map((item: any, index: number) => (
                    <span key={index}>{index != 0 && '、'}{item?.name}</span>
                  ))
                }
              </Space>
            </div>
            <Divider />
            <div>
              <h3>症状</h3>
              <Space>
                {data?.diseaseSymptomatic}
              </Space>
            </div>
            <Divider />
            <div>
              <h3>六经/气血津液/邪性</h3>
              {
                tyDiagnosisInfo?.tyDiagnosisJson?.map((item: any, index: number) => (
                  <div key={index}>
                    <Space>
                      <b>{item?.name}：</b>
                      <div>
                        {
                          item?.child?.map((li: any, i: number) => (
                            <span key={i}>{index != 0 && '、'}{li?.name}</span>
                          ))
                        }
                      </div>
                    </Space>
                  </div>
                ))
              }
            </div>
            <Divider />
            <div>
              <h3>处方</h3>
              <Space></Space>
            </div>
          </div>
        }
        title={title}
        trigger="click"
        open={open}
        onOpenChange={handleOpenChange}
      >
        <span className={styles.timeItem}>
          {
            title
          }
        </span>
      </Popover>

    </>
  );
};
export default MedicalRecordItem;

